@import '../../../core/index.less';

.orin-w-personaltaps-root {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100/@remScale;
    background: @white;
    .personal-taps {
        width: 880/@remScale;
        display: flex;
        background: @white;
        .taps-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .count {
                font-size: 16/@remScale;
                color: @black-auxiliary;
            }
            .text {
                font-size: 16/@remScale;
                color: @black-auxiliary;
            }
            &.active, &:hover {
                .count, .text {
                    color: @light-blue-color;
                }
            }
        }
    }
    @media (max-width: @max1) {
        height: 60/@remScale;
        .personal-taps {
            width: 100%;
            .taps-item {
                flex-direction: column;
                border-right: 1/@remScale solid @cut-line-color;
                .count {
                    font-size: 15/@remScale;
                }
                .text {
                    font-size: 11/@remScale;
                    margin-top: 2/@remScale;
                }
            }
        }
    }
}